<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../common/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../app/app.css">
<script src="../../common/layui/layui.js"></script>
<script type="text/javascript" src="../../common/ztree/js/jquery-1.4.4.min.js"></script>
<script src="../../common/layui/layui.all.js"></script>
<script src="../../app/app.js"></script>
<div id="iframeItemDiv" class="appIframeItem">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>{tableComment}管理</legend>
</fieldset>
<form id="queryForm">
<div class="table">
    {field}
    {fieldComment}：
    <div class="layui-inline">
        <input class="layui-input" name="{lowCaseFieldName}" id="{lowCaseFieldName}" autocomplete="off">
    </div>
    {/field}
    <div class="layui-btn" data-type="reload" id="reload">搜索</div>
</div>
</form>
<table class="layui-hide" id="table" lay-filter="table"></table>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="grant">分配权限</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="load">查看</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </div>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script src="../../app/iframeItem.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#table'
            ,url: '/{lowCaseClassName}/query'
            ,toolbar: '#toolbar'
            ,cols: [[
                {type:'radio',align:'center'}
                {field}
                ,{field:'{lowCaseFieldName}', title: '{fieldComment}',align:'center'}
                {/field}
            ]]
            ,id: 'reload'
            ,page: true
            ,limits: [10,20,50,100,200,500,1000,2000,5000,10000]
            ,limit: 10
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: form2Object("queryForm")
                }, 'data');
            }
        };

        $('.table .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data[0];  //获取选中行数据
            switch(obj.event){
                case 'add':
                    add(data);
                    break;
                case 'edit':
                    if(checkSelect(data))
                    {
                        edit(data);
                    }
                    break;
                case 'load':
                    break;
                case 'del':
                    if(checkSelect(data))
                    {
                       dialog("您确定要删除？",function () {
                           del(data)
                       });
                    }
                    break;
            };
        });

        //添加
        function add(data)
        {
            window.location.href = 'add.html';
        }
        //编辑
        function edit(data)
        {
            window.location.href = 'edit.html?id='+data.id;
        }
        //读取
        function load(data)
        {
            get("/{lowCaseClassName}/load?id="+data.id,function (res) {
                console.log(res);
            });
        }
        //删除
        function del(data)
        {
            get("/{lowCaseClassName}/delete?id="+data.id,function (res) {
                layer.alert("删除成功");
                //点击刷新表格
                $("#reload").click();
            });
        }
        //检查是否选中
        function checkSelect(data) {
            if(!data)
            {
                layer.msg("请选择一行再进行操作");
            }
            return data;
        }
    });
</script>
